<template>
  <div class="btm_50">
    <comm-head/>
    <div>
      <img :src="detail.pic" alt="">
    </div>
    <!-- 价格 -->
    <div class="price_box">
      <div class="price">
        <span class="smart"> ￥</span>
        <span>{{detail.minPrice}}</span>
        <span class="smart">.00</span>
      </div>
      <div class="icon_box">
        <span class="flex">
          <van-icon name="after-sale" />
          <span class="icon_font smart">
            降价提醒
          </span>
        </span>
        <span class="flex">
          <van-icon name="good-job-o" />
          <span class="icon_font smart">
            收藏
          </span>
        </span>
      </div>
    </div>
    <!-- 名称加介绍 -->
    <div class="goodname">
      <span>
        <van-icon name="fire" color='red' />{{detail.name}}</span>
      <span class="miaoshu">{{detail.characteristic?detail.characteristic: '暂无描述'}}</span>
    </div>
    <!-- 详情富文本 -->
    <div v-html="content" class="font_12"></div>
    <!-- 底部操作栏 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-goods-action-icon icon="cart-o" :badge="$store.state.car.number" text="购物车" />
      <van-goods-action-icon icon="star" text="已收藏"  />
      <van-goods-action-button type="warning"  text="加入购物车" @click="show=true"/>
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
    <!-- 加入购物车 -->
    <van-popup
      v-model="show"
      position="bottom"
      :style="{ height: '40%' }"
      closeable
      round
    >
       <van-card
        num="1"
        :title="detail.name"
        :price="detail.minPrice+0.99"
        :desc="detail.characteristic?detail.characteristic: '暂无描述'"
        :thumb="detail.pic"
      >
        <template #footer>
          <div class="count">
            <span>数量</span>
            <van-stepper v-model="value" />
          </div>
          <van-button type="danger" round size="large" @click="addcart">确认加入购物车</van-button>
        </template>
      </van-card>
    </van-popup>
  </div>
</template>

<script>
// import CommHead from '_components/CommHead.vue'
import { getToken } from '_utils'
import CommHead from '../../components/CommHead.vue'
import { fetchItemDetail, addCart } from '_api'
import { Toast } from 'vant'
export default {
  data () {
    return {
      detail: {},
      content: '<div>暂无详情图</div>',
      show: false,
      value: 1
    }
  },
  created () {
    this.fetchItemDetail()
  },
  mounted () {
    console.log(this.$route)
  },
  methods: {
    // 加入购物车
    addcart () {
      console.log(this.detail.id)
      addCart({
        goodsId: this.detail.id,
        number: 1,
        token: getToken()
      }).then(res => {
        if (res.data.code === 0) {
          // res.data.data.number
          this.$store.commit('car/set_cart_info', res.data.data.number)
          Toast({
            type: 'success',
            message: '加入才成功',
            duration: 1000,
            onClose: () => {
              this.show = false
            }
          })
        }
        // console.log(res.data)
      })
    },
    // 获取商品详细数据
    fetchItemDetail () {
      fetchItemDetail(this.$route.query.id).then(res => {
        this.detail = res.data.data.basicInfo
        console.log(res.data.data.basicInfo)
        if (res.data.data.content) {
          this.content = res.data.data.content.replace(/<img/gi, '<img style="width:100%; display:block"')
        }
        console.log(this.content)
      })
    },
    con () {
      console.log(this.$route.query.id)
    }
  },
  components: { CommHead }
}
</script>

<style lang="scss" scoped>
.btm_50{
  margin-bottom: 50px;
}
img{
  width: 100%;
  height: 375px;
  vertical-align: middle;
}
.price_box{
  font-size: 20px;
  display: flex;
  padding: 0 15px;
  justify-content: space-between;
  align-items: center;
  .price{
    color: red;
    font-size: 28px;
    .smart{
      font-size: 16px;
    }
  }
  .icon_box{
    display: flex;
    color: #333;
    .flex{
      display: flex;
      flex-direction: column;
      justify-content: center;
      .smart{
        font-size: 10px;
        width: 40px;
        transform:scale(.8);
      }
    }
  }
}
.goodname{
  padding: 5px 10px;
  text-align: left;
  font-size: 20px;
  font-weight: 700;
  span{
    display: block;
  }
  .miaoshu{
      font-size: 12px;
      font-weight: 400;
      text-indent: 1em;
    }
}
.font_12{
  text-align: left;
  font-size: 12px;
  padding-bottom: 50px;
}
.van-card__content{
  text-align: left;
}
.van-card__title{
  font-size: 18px;
}
.van-card__price{
  color: red;
  font-size: 30px;
  .van-card__price-integer{
    font-size: 30px;
  }
}
.count{
  display: flex;
  justify-content: space-between;
}
.van-popup{
  overflow: none;
  -webkit-overflow-scrolling: none;
  .van-card{
    height: 100%;
    display: flex;
    flex-direction: column;
    .van-card__footer{
      flex: 1;
      position: relative;
      .van-button{
        left: 0;
        position: absolute;
        bottom: 0;
      }

    }
  }
}

</style>
